﻿<div class="messageBox" style="width: 380px">
    <div class="modal-header">
        <h3>Create a new task</h3>
    </div>
    <div class="modal-body">
        <form role="form">
            <div class="form-group">
                <label for="NewTaskTitle">Title</label>
                <input type="text" class="form-control" maxlength="200" id="NewTaskTitle" placeholder="Enter title" data-bind="value: task.title" required>
            </div>
            <div class="form-group">
                <label for="NewTaskDescription">Description</label>
                <textarea class="form-control" maxlength="2000" id="NewTaskDescription" placeholder="Enter description here" data-bind="value: task.description" rows="5"  required></textarea>
            </div>
            <div class="form-group">
                <label for="NewTaskAssignedUserId">Assign to</label>
                <select id="NewTaskAssignedUserId" class="form-control" data-bind="value: task.assignedUserId, options: users, optionsText: function (item) { return item.name() + ' ' + item.surname(); }, optionsValue: function (item) { return item.id(); }">
                </select>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="NewTaskPriority">Priority</label>
                        <!-- TODO: Get from enumaration, make component? -->
                        <select id="NewTaskPriority" class="form-control" data-bind="value: task.priority">
                            <option value="1">Low</option>
                            <option value="2">BelowNormal</option>
                            <option value="3">Normal</option>
                            <option value="4">AboveNormal</option>
                            <option value="5">High</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label for="EditTaskPrivacy">Privacy</label>
                        <!-- TODO: Get from enumaration, make component? -->
                        <select id="EditTaskPrivacy" class="form-control" data-bind="value: task.privacy, enable: task.privacyEditable">
                            <option value="1">Private</option>
                            <option value="2">Protected</option>
                        </select>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-bind="click: cancel">Cancel</button>
        <button type="button" class="btn btn-primary" data-bind="click: saveNewTask">Save</button>
    </div>
</div>
